<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE html>
<html lang="zh-CN">

<head>

        <meta charset="utf-8">
        <title>PerMa - Personal Information Manager</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">   

        <!-- CSS -->
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
        <link rel="stylesheet" href="../assets/bootstrap-3.3.4-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../assets/css/groupContent-style.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->


</head>

<body>

		<div class="container main">
			<div class="row">
				<div class="col-md-12">
		    		<div class="contan">
			    		<h5>全部分组</h5>
						<hr/>
						<s:if test="#session.group.size==0">
							<div class="row">
								<div class="col-md-3">
										<div class="thumbnail">
											<img src="../assets/img/figure/plus.jpg">
											<div class="caption">
											    <h3>添加</h3>
											   	<a onclick="showOrHide('add')">点击添加新的分组</a>
												<form style="display: none" id="add" action="addGroup.action" method="post">
													组名：<br/>
													<input type="text" name="groupName" /><br/>
													真实姓名：<br/>
													<select name="nameId">
														<s:iterator value="#session.truename" var="name">
															<option value=<s:property value="#name.id" />><s:property value="#name.firstName"/>.<s:property value="#name.lastName" /></option>
														</s:iterator>
													</select>
													<br/>
													联系方式：<br/>
													<select name="celephoneId">
														<s:iterator value="#session.celephone" var="cele">
															<option value=<s:property value="#cele.id" />><s:property value="#cele.celephone"/></option>
														</s:iterator>
													</select>
													<br/>
													常用地址：<br/>
													<select name="addressId">
														<s:iterator value="#session.address" var="address">
															<option value=<s:property value="#address.id"/>><s:property value="#address.address"/></option>
														</s:iterator>
													</select>
													<br/>
													电子邮箱：<br/>
													<select name="emailId">
														<s:iterator value="#session.email" var="email">
															<option value=<s:property value="#email.id" />><s:property value="#email.email"/></option>
														</s:iterator>
													</select>
													<br/>
													<p>
													<input type="submit" class="btn btn-primary" value="添加" />
												     </p>
												</form>
											</div>
										</div>
									</div>
							</div>
						</s:if>
						
						<s:iterator value="#session.group" var="group" status="st">
							<s:if test="#st.index%3==0"><div class="row"></s:if> 
								<div class="col-md-3">
									<div class="thumbnail">
										<img src="../assets/img/figure/group.png">
										<div class="caption">
											<h3><s:property value="#group.groupName" /></h3>
											<a onclick="showOrHide('<s:property value="#st.index" />')">点击查看更详细的信息</a>
											<form id=<s:property value="#st.index" /> style="display: none">
												真实姓名：<br/>
												<select name="nameId" >
													<s:iterator value="#session.truename" var="name">
														<option value=<s:property value="#name.id" /> <s:if test='#name.id==#group.trueName.id'>selected=selected</s:if> >
															<s:property value="#name.firstName"/>.<s:property value="#name.lastName" />
														</option>
													</s:iterator>
												</select>
												<br/>
												联系方式：<br/>
												<select name="celephoneId">
													<s:iterator value="#session.celephone" var="cele">
														<option value=<s:property value="#cele.id" /> <s:if test='#cele.id==#group.celephone.id'>selected=selected</s:if>>
															<s:property value="#cele.celephone"/>
														</option>
													</s:iterator>
												</select>
												<br/>
												常用地址：<br/>
												<select name="addressId">
													<s:iterator value="#session.address" var="address">
														<option value=<s:property value="#address.id"/> <s:if test='#address.id==#group.address.id'>selected=selected</s:if>>
															<s:property value="#address.address"/>
														</option>
													</s:iterator>
												</select>
												<br/>
												电子邮箱：<br/>
												<select name="emailId">
													<s:iterator value="#session.email" var="email">
														<option value=<s:property value="#email.id" /> <s:if test='#email.id==#group.email.id'>selected=selected</s:if>>
															<s:property value="#email.email"/>
														</option>
													</s:iterator>
												</select>
												<br/>
												<input type="hidden" name="id" value=<s:property value="#group.id"/> />
												<input type="hidden" name="index" value=<s:property value="#st.index"/> />
												<p>
											    <a href="javascript:modifyGroup('<s:property value="#st.index" />')" class="btn btn-primary" role="button">修改</a> | 
											    <a href="javascript:deleteGroup('<s:property value="#st.index" />')" >删除</a>
											     </p>
											</form>
										</div>
									</div>
								</div>
							<s:if test="#st.index%3==2"></div></s:if>
							<s:if test="#st.last">
								<s:if test="#st.count%3==0"><div class="row"></s:if>
									<div class="col-md-3">
										<div class="thumbnail">
											<img src="../assets/img/figure/plus.jpg">
											<div class="caption">
											    <h3>添加</h3>
											    <a onclick="showOrHide('add')">点击添加新的分组</a>
												<form style="display: none" id="add" action="addGroup.action" method="post">
													组名：<br/>
													<input type="text" name="groupName" /><br/>
													真实姓名：<br/>
													<select name="nameId">
														<s:iterator value="#session.truename" var="name">
															<option value=<s:property value="#name.id" />><s:property value="#name.firstName"/>.<s:property value="#name.lastName" /></option>
														</s:iterator>
													</select>
													<br/>
													联系方式：<br/>
													<select name="celephoneId">
														<s:iterator value="#session.celephone" var="cele">
															<option value=<s:property value="#cele.id" />><s:property value="#cele.celephone"/></option>
														</s:iterator>
													</select>
													<br/>
													常用地址：<br/>
													<select name="addressId">
														<s:iterator value="#session.address" var="address">
															<option value=<s:property value="#address.id"/>><s:property value="#address.address"/></option>
														</s:iterator>
													</select>
													<br/>
													电子邮箱：<br/>
													<select name="emailId">
														<s:iterator value="#session.email" var="email">
															<option value=<s:property value="#email.id" />><s:property value="#email.email"/></option>
														</s:iterator>
													</select>
													<br/>
													<p>
													<input type="submit" class="btn btn-primary" value="添加" />
												     </p>
												</form>
											</div>
										</div>
									</div>
								</div>
							</s:if>
						</s:iterator>
					</div>
		    	</div>
			</div>
		</div>
		
        <!-- Javascript -->
        <script src="../assets/jquery-1.11.1/jquery.js"></script>
        <script src="../assets/jquery-1.11.1/jquery.backstretch.min.js"></script>
        <script src="../assets/bootstrap-3.3.4-dist/js/bootstrap.js"></script>
        <script src="../assets/js/groupContent.js"></script>
</body>

</html>